<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
	<script src="js/serverUrl.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mint.js"></script>
	<script src="js/moment.js"></script>
	<body>
		<div id="app">
			
<!--			<mt-swipe  style="height: 40vw;" :auto="4000">-->
<!--			  <mt-swipe-item v-for="item in imageList"> <img  class="swiper-slide" :src="item"></mt-swipe-item>-->
<!--			</mt-swipe>-->
			<div class="moduleBar">
				<div  v-for="(item,index) in moduleList"
					  class="module"
					  :style="{'background-color': (item.selected?'#f0f0f0':'#ffffff')}"
					  v-on:click="moduleClick(index)">
					<div class="moduleImageContainer" :style="{'background-color': item.background}">
						<img class="mouduleImage" :src="item.image" />
					</div>
					<div class="mouduleName"> {{item.name}}</div>
				</div>
			</div>
			<div v-if="false" class="tradeBar" >
			   <div class="tradeContainer">
			    <div v-for="(item,index) in tradeList"
					 class="trade" 
					 :style="{'color': (item.selected?'#C7000A':'gray'),'border-color': (item.selected?'#C7000A':'gray')}"
					 v-on:click="tradeClick(index)">{{item.moduleName}}</div>
			   </div>
			
			  </div>
            
            <div id="table" class="card">
                <div v-for="(news,index) in newsList">
                    <div v-if="news.listDataType == 2"  class="jinengNews" v-on:click="toNewsDetail(news.dataId)">
                        <div class="newsTitle"><span class="newsTitleSpan" :style="{'background-color':news.color}">{{news.type}}</span>{{news.title}}</div>
                        <div class="author">作者：{{news.author}} <span class="newsDate">{{news.showTime}}</span></div>
                    </div>
                    <div v-if="news.listDataType == 6"  class="jinengVideo"  v-on:click="toVideoDetail(index)">
                        <div  class="videoInfo">
                            <div class="newsTitle"><span class="newsTitleSpan" :style="{'background-color':news.color}">{{news.type}}</span>{{news.title}}</div>
                            <div class="videoAuthor">作者：{{news.author}}</div>
                        </div>
                        <div>
                            <img class="videoImage" :src="serverUrl+news.coverUrl" />
                        </div>
                    </div>
                    <div v-if="news.listDataType == 5" class="jinnengTopic" v-on:click="toTopicDetail(news.dataId)">
                        <div class="newsTitle">{{news.title}}</div>
                        <img class="topicImage" :src="serverUrl+news.coverUrl" />
                        <div class="author">作者：{{news.author}} <span class="newsDate">{{news.showTime}}</span></div>
                    </div>
                </div>
            </div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		   imageList: [],
		   newsList:[],
		   tradeList: JSON.parse(JSON.stringify(tradeInfoList)),
		   moduleList: [ {
			   image: 'img/safe.png',
			   background: '#C7000A',
			   name: '安全知识',
			   module: '[1,2]',
			   selected:true
		   },
		
		   {
			   image: 'img/job.png',
			   background: '#FF9800',
			   name: '管理改善',
			   module: '[1,4]',
			   selected:false
		   },
		   {
			   image: 'img/improve.png',
			   background: '#4CAF50',
			   name: '精品课程',
			   module: '[1,5]',
			   selected:false
			},
            {
                image: 'img/skill_learn.png',
                background: '#2196F3',
                name: '专题培训',
                module: '[1,16]',
                selected:false
            },
		   ]
		  },
          created () {
              window.getNewsList = this.getNewsList
              window.clear = this.clear
              window.getImageList = this.getImageList
          },
		  methods:{
              getImageList (imageList) {
                  this.imageList = imageList
              },
              getNewsList (newsList) {
                  for(let i=0;i<newsList.length;i++){
                      let moudleInfo = JSON.parse(newsList[i].module)[0]

                      newsList[i].color = "#C7000A"
                      newsList[i].type = '在线学习'
                      newsList[i].showTime = moment(newsList[i].pushDate).format("YYYY-MM-DD")
                      if(JSON.stringify(moudleInfo) == "[1,2]") {
                          newsList[i].color = "#C7000A"
                          newsList[i].type = '安全学习'
                      }
                      if(JSON.stringify(moudleInfo) == "[1,3]") {
                          newsList[i].color = "#2196F3"
                          newsList[i].type = '岗位技能'
                      }
                      if(JSON.stringify(moudleInfo) == "[1,4]") {
                          newsList[i].color = "#FF9800"
                          newsList[i].type = '管理改善'
                      }
                      if(JSON.stringify(moudleInfo) == "[1,5]") {
                          newsList[i].color = "#4CAF50"
                          newsList[i].type = '精品课程'
                      }
                      if(JSON.stringify(moudleInfo) == "[6,8]") {
                          newsList[i].color = "#C7000A"
                          newsList[i].type = '企业风采'
                      }
                      if(JSON.stringify(moudleInfo) == "[6,12]") {
                          newsList[i].color = "#4CAF50"
                          newsList[i].type = '学习视频'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,11]") {
                          newsList[i].color = "#2196F3"
                          newsList[i].type = '基层一线'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,10]") {
                          newsList[i].color = "#4CAF50"
                          newsList[i].type = '行业快讯'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,14]") {
                          newsList[i].color = "#C7000A"
                          newsList[i].type = '集团要闻'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,15]") {
                          newsList[i].color = "#FF9800"
                          newsList[i].type = '法律法规'
                      }
                      if(JSON.stringify(moudleInfo) == "[15,16]") {
                          newsList[i].color = "#2196F3"
                          newsList[i].type = '能工巧匠'
                      }
                       if(JSON.stringify(moudleInfo) == "[6,16]") {
                          newsList[i].color = "#C7000A"
                          newsList[i].type = '精选好文'
                      }
                       if(JSON.stringify(moudleInfo) == "[1,16]") {
                          newsList[i].color = "#C7000A"
                          newsList[i].type = '专题培训'
                      }
                       if(JSON.stringify(moudleInfo) == "[17,18]") {
                            newsList[i].color = "#FF9800"
                            newsList[i].type = '安全知识'
                        }
                        
                        if(JSON.stringify(moudleInfo) == "[17,19]") {
                            newsList[i].color = "#C7000A"
                            newsList[i].type = '安全文件'
                        }
                        
                        if(JSON.stringify(moudleInfo) == "[17,20]") {
                            newsList[i].color = "#4CAF50"
                            newsList[i].type = '安全视频'
                        }
                        
                        if(JSON.stringify(moudleInfo) == "[17,21]") {
                            newsList[i].color = "#2196F3"
                            newsList[i].type = '安全专题'
                        }
                        if(JSON.stringify(moudleInfo) == "[22,23]") {
                            newsList[i].color = "#4CAF50"
                            newsList[i].type = '班组园地'
                        }
                        if(JSON.stringify(moudleInfo) == "[22,24]") {
                            newsList[i].color = "#2196F3"
                            newsList[i].type = '他山之石'
                        }
                      this.newsList.push(newsList[i])
                  }
              },
              clear() {
                  this.newsList = []
              },
              
			  moduleClick (index){
				this.moduleList.forEach(item => {item.selected = false})
				this.moduleList[index].selected = true
                var params = {
                    module:this.moduleList[index].module
                }
                WebViewJavascriptBridge.callHandler('moduleChange',params,function(response) {
                                                                    
               });
    
			  },
              
			  tradeClick (index) {
				 this.tradeList.forEach(item => {item.selected = false})
				 this.tradeList[index].selected = true
                 var params = {
                     module:this.tradeList[index].module
                 }
                 WebViewJavascriptBridge.callHandler('tradeChange',params,function(response) {
                                                     
                 });
                },
              
              toNewsDetail (dataId){
                var params = {
                    newsId:dataId
                }
                WebViewJavascriptBridge.callHandler('toNewsDetailViewController',params,function(response) {
                                     
                 });
                
              },
              toVideoDetail (index) {
                  let news = this.newsList[index]
                  let params = {
                      dataId: news.dataId,
                      coverUrl:news.coverUrl
                  }
                  WebViewJavascriptBridge.callHandler('toVideoDetailViewController',params,function(response) {
                     
                  });
                
              },
              toTopicDetail (dataId) {
                  var params = {
                      dataId:dataId
                  }
                  WebViewJavascriptBridge.callHandler('toTopicDetailViewController',params,function(response) {
                          
                   });
              }
		  }
		})
	</script>
</html>
